<template>
  <IFexHeaderMain>
    <template #header>
      <IHeader>首页</IHeader>
    </template>
    <view class="login-content whov">
      <!-- 顶部logo区域 -->
      <view class="login-header flex flex-column items-center">
        <view class="login-logo">
          <!-- 补充logo图片路径（需替换为实际项目图片） -->
          <image src="/static/images/logo.png" mode="widthFix" class="logo-img"></image>
        </view>
        <view class="login-title">欢迎登录</view>
      </view>

      <!-- 登录按钮区域 -->
      <view class="login-body">
        <button class="login-btn"  @click="login" :disabled="isLoading">
          <template v-if="isLoading">
            <text class="loading-text">登录中...</text>
          </template>
          <template v-else>一键登录/注册</template>
        </button>
        <view class="login-btn-cancel" @click="handlerToHome"> 暂不登录 </view>
      </view>
    </view>
  </IFexHeaderMain>
</template>

<script setup lang="ts">
  import IFexHeaderMain from '@/components/container/IFexHeaderMain.vue'
  import IHeader from '@/components/container/IHeader.vue'
  import { useNavigatePage } from '@/hooks/navigateTo'
  import useAccountStore from '@/store/account'
  import { ref } from 'vue'
  import useToastMsg from '@/hooks/sysMsg'
  import { getLoginRes, selectUserInfo, userLogin } from '@/api/login'
  import useUserInfoStore from '@/store/userInfo'
  const accountStore = useAccountStore()
  const userInfoStore = useUserInfoStore()
  const popupRef = ref()
  const toastMsg = useToastMsg()
  const checkBoxValue = ref<number[]>([])
  const isLoading = ref(false)
  const navigatePage = useNavigatePage()
  const checkboxOptions = [
    {
      value: 1,
      text: '我已阅读并同意《用户协议》和《隐私协议》',
    },
  ]
  const login = async (e: any) => {
    if (isLoading.value) return // 防止重复提交
    isLoading.value = true
    const loginRes = await getLoginRes()
    if (loginRes.errMsg === 'login:ok') {
      const result: any = await userLogin(loginRes)
      if (result) {
        uni.setStorageSync('token', result.data.token)
        uni.setStorageSync('rtoken', result.data.token)
        handlerToHome()
      }
    }
    isLoading.value = false
  }

  const getPhoneNumber = (e: any) => {
    // if (e.detail.errMsg === 'getPhoneNumber:ok') {
      login(e)
    // } else {
    //   toastMsg.showToast('请授权手机号以完成登录')
    // }
  }

  const handlerToHome = () => {
    navigatePage.redirectTo('/pages/index/index')
  }

  const handlerConfig = () => {
    checkBoxValue.value = [1]
  }
</script>

<style lang="scss" scoped>
  .login-content {
    background: #fff;
    padding: 0 30rpx;
    box-sizing: border-box;

    // 顶部logo区域
    .login-header {
      padding-top: 120rpx;
      text-align: center;
      .login-logo {
        margin: 0 auto;
        width: 180rpx;
        height: 180rpx;
        border-radius: 50%;
        background: #3b82f6;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8rpx 16rpx rgba(96, 213, 150, 0.15);

        .logo-img {
          width: 120rpx;
          height: 120rpx;
        }
      }

      .login-title {
        margin-top: 40rpx;
        font-size: 36rpx;
        color: #333;
        font-weight: 600;
        letter-spacing: 2rpx;
      }

      .login-subtitle {
        margin-top: 16rpx;
        font-size: 24rpx;
        color: #999;
        letter-spacing: 1rpx;
      }
    }

    // 登录按钮区域
    .login-body {
      padding-top: 70rpx;
      display: flex;
      flex-direction: column;
      align-items: center;

      .login-btn {
        width: 100%;
        line-height: 90rpx;
        background-color: #3b82f6;
        color: white;
        border: none;
        border-radius: 15rpx;
        font-size: 30rpx;
        font-weight: 500;
        transition: all 0.3s;

        .loading-text {
          margin-left: 12rpx;
        }
      }

      .login-btn-cancel {
        margin-top: 30rpx;
        font-size: 26rpx;
        color: #626774;
        line-height: 36rpx;
        text-align: center;
        padding: 10rpx 20rpx;
        border-radius: 20rpx;
        transition: all 0.2s;

        &:active {
          background: #f5f5f5;
        }
      }
    }

    // 协议勾选区域
    .user-rule {
      position: absolute;
      bottom: 120rpx;
      left: 0;
      width: 100%;
      padding: 0 30rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      color: #626774;

      ::v-deep .uni-data-checkbox {
        display: flex;
        align-items: center;

        .uni-checkbox-input {
          width: 28rpx;
          height: 28rpx;
          margin-right: 10rpx;
        }

        .uni-checkbox-text {
          color: #626774;
          line-height: 1.4;
        }
      }
    }
  }

  // 弹窗样式
  .popup-content {
    padding: 40rpx 30rpx;
    text-align: center;

    .popup-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 30rpx;
    }
  }

  .text-group {
    font-size: 26rpx;
    line-height: 1.6;
    text-align: left;
    margin-bottom: 40rpx;

    .text-gray {
      color: #626774;
      display: block;
      margin-bottom: 20rpx;
    }
  }

  .protocol-links {
    display: flex;
    align-items: center;
    gap: 10rpx;
    flex-wrap: wrap;
  }

  .text-blue {
    color: #0a5341;
    text-decoration: underline;
    padding: 5rpx 0;
    cursor: pointer;
  }

  .text-divider {
    color: #999;
  }

  .btn-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30rpx;
    margin-top: 20rpx;

    .cancel-btn {
      padding: 20rpx 40rpx;
      font-size: 28rpx;
      color: #677389;
      line-height: 40rpx;
      background: #f5f5f9;
      border-radius: 39rpx;
      transition: all 0.2s;

      &:active {
        background: #e8e8ed;
      }
    }

    .confirm-btn {
      padding: 20rpx 60rpx;
      font-weight: 500;
      font-size: 28rpx;
      color: #ffffff;
      line-height: 40rpx;
      background: linear-gradient(138deg, #60d596 0%, #5ecbb0 100%);
      box-shadow: 0 4rpx 8rpx rgba(96, 213, 150, 0.3);
      border-radius: 39rpx;
      transition: all 0.2s;

      &:active {
        opacity: 0.9;
        transform: scale(0.98);
      }
    }
  }
</style>
